<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <navbar title="诊断报告" @back="resetForm"/>
    <div class="content_box">
        <div class="seloect_box">
            <span @click="setStatus(1)" :class="{active:status==1}">报告详情</span>
            <span @click="setStatus(2)" :class="{active:status==2}">设备诊断明细</span>
        </div>
        <div class="" v-if="status==1">
            <div class="realTime_box">
                <div class="realTime_title">
                    <span class="icon iconfont icon-zhenduan-baogaogaishu"></span>
                    <span class="desc">报告概述</span>
                </div>
                <div class="table">
                    <div class="row row2">
                        <div class="title">
                            诊断时间
                        </div>
                        <div class="desc">
                            2023-05-23 15:23:12
                        </div>
                    </div>
                    <div class="row">
                        <div class="title">
                            诊断对象
                        </div>
                        <div class="desc">
                            3#储能单元
                        </div>
                    </div>
                    <div class="row">
                        <div class="title">
                            电芯供应商
                        </div>
                        <div class="desc">
                            海基
                        </div>
                    </div>
                    <div class="row">
                        <div class="title">
                            诊断项数量
                        </div>
                        <div class="desc">
                            {{info.diagnosis_nums}}
                        </div>
                    </div>
                    <div class="row">
                        <div class="title">
                            预警数量
                        </div>
                        <div class="desc">
                            <div class="error">重度0个</div>
                            <div class="warn">中度0个</div>
                            <div class="warn_n">轻度0个</div>
                        </div>
                    </div>
                    <div class="row row2">
                        <div class="title">
                            区块链哈希值
                        </div>
                        <div class="desc" style="word-break:break-all;">
                            {{info.hash_code}}
                        </div>
                    </div>
                    <div class="row"  style="max-width: 130px;padding-top: 10px;">
                        <div id="charts_j" style="width: 110px; height: 110px"></div>
                    </div>
                    <div class="row">
                        <div class="title">
                            诊断评分
                        </div>
                        <div class="desc">
                            <div class="data_info" v-for="res,i in info.diagnosis_info" :key="i">
                                <span class="icon" :class="`i${i+1}`"></span>
                                <span class="info">{{res.type}}：{{res.score*100}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                    
            </div>
            <div class="realTime_box">
                <div class="realTime_title">
                    <span class="icon iconfont icon-zhenduan-zhenduanjianyi"></span>
                    <span class="desc">诊断建议</span>
                </div>
                <a-table
                  :columns="columns"
                  :rowKey="(record) => record.id"
                  :data-source="info.diagnosis_info"
                  :pagination="false"
                >
                </a-table>
            </div>
        </div>
        <div id="" v-if="status==2">
            <!-- <div class="" style="display: flex;margin-top: 10px;">
                <a-select default-value="jack" style="width: 130px;margin-right: 20px;" @change="handleChange">
                  <a-select-option value="jack">
                    电压（V）
                  </a-select-option>
                  <a-select-option value="lucy">
                    2
                  </a-select-option>
                </a-select>
            </div>
            <div class="unit_box">
                <div class="unit" v-for="res in [1,2,3,4,5]" :key="res">
                    <div class="unit_p">
                        <img src="../../assets/img/unit/单簇.png" >
                        <span class="unit_desc">{{res}}#电池簇</span>
                    </div>
                </div>
            </div> -->
            <div class="realTime_box">
                <div class="realTime_title">
                    <span class="icon iconfont icon-zhenduan-shebeixinxi"></span>
                    <span class="desc">基本信息</span>
                </div>
                <div class="table">
                    <div class="row row2">
                        <div class="title">
                            诊断簇
                        </div>
                        <div class="desc">
                            {{info.e_s_cluster.name}}
                        </div>
                    </div>
                    <!-- <div class="row">
                        <div class="title">
                            材料
                        </div>
                        <div class="desc">
                            碳酸铁锂
                        </div>
                    </div> -->
                    <div class="row">
                        <div class="title">
                            额定容量
                        </div>
                        <div class="desc">
                            {{info.e_s_cluster.capacity}}Ah
                        </div>
                    </div>
                    <div class="row">
                        <div class="title">
                            电流功率
                        </div>
                        <div class="desc">
                            {{info.e_s_cluster.current_power}}
                        </div>
                    </div>
                    <div class="row" style="max-width: 130px;padding-top: 10px;">
                        <div id="charts_j" style="width: 110px; height: 110px"></div>
                    </div>
                    <div class="row">
                        <div class="title">
                            诊断评分
                        </div>
                        <div class="desc">
                            <div class="data_info" v-for="res,i in info.diagnosis_info" :key="i">
                                <span class="icon" :class="`i${i+1}`"></span>
                                <span class="info">{{res.type}}：{{res.score*100}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                    
            </div>
        </div>
        <div class="realTime_box">
            <div class="realTime_title">
                <span class="icon iconfont icon-zhenduan-zhenduanliebiao"></span>
                <span class="desc">诊断列表</span>
            </div>
            <!-- <div class="search" style="margin-top: 10px;">
                <a-select default-value="jack" style="width: 130px;margin-right: 20px;" @change="handleChange">
                  <a-select-option value="jack">
                    1#储能单元
                  </a-select-option>
                  <a-select-option value="lucy">
                    2
                  </a-select-option>
                </a-select>
            </div> -->
            <a-table
              :columns="columns2"
              :rowKey="(record) => record.id"
              :data-source="info.result"
              :pagination="false"
            >
            <div slot="type" slot-scope="text, record">
                <a-tag color="#FFBF35" v-if="record.type=='经济性'">
                    经济
                </a-tag>
                <a-tag color="#74F5F6" v-if="record.type=='可靠性'">
                    可靠
                </a-tag>
                <a-tag color="#206EF7" v-if="record.type=='安全性'">
                    安全
                </a-tag>
            </div>
            </a-table>
        </div>
        <div class="" v-if="status==2">
            <div class="" style="display: flex;">
                <div class="realTime_box" style="flex: 1;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-zhenduan-xiajiyizhixingfenxi"></span>
                        <span class="desc">下级一致性分析</span>
                    </div>
                    <div class="">
                        <div id="charts_radar" style="width: 100%;height: 400px;"></div>
                    </div>
                </div>
                <div class="realTime_box" style="margin-left: 20px;flex: 1;">
                    <div class="realTime_title">
                        <span class="icon iconfont icon-zhenduan-tongjikongjianfenbu"></span>
                        <span class="desc">同级空间分布</span>
                    </div>
                    <div class="">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {get,gets,updata} from "@/services"
import echarts from 'echarts'
var _this;
export default {
  name: "Demo",
  data() {
    return {
      status:1,
      pagination:{},
      info:{
          diagnosis_info:[],
          e_s_cluster:{},
          result:[]
      },
      columns:[
          {title: "诊断分类",dataIndex: "type",key: "type",className:'column-white'},
          {title: "等级",dataIndex: "level",key: "level",className:'column-white'},
          {title: "处理建议",dataIndex: "advice",key: "advice",className:'column-white',width:"60%"}
      ],
      columns2:[
          {title: "诊断项",dataIndex: "diagnosis_item",key: "diagnosis_item",className:'column-white'},
          {title: "诊断分类",dataIndex: "type",scopedSlots: { customRender: "type" },className:'column-white'},
          
          {title: "等级",dataIndex: "level",key: "level",className:'column-white'},
          {title: "定位",dataIndex: "localtion",key: "localtion",className:'column-white'},
          {title: "处理建议",dataIndex: "advice",key: "advice",className:'column-white',width:"40%"}
      ],
      data: [{
            name1:'2021-02-20 18:18:18',
            name2:'2#处理单元',
            name3:'1#-1#',
            name3:'温度太高',
            name4:'4',
            name5:'--',
            name6:'--',
            name7:'未处理'
        }],
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  created(){
    _this = this
    let id = this.$route.query.id;
    gets({search:id,searchFields:'task_id'},'reports').then(({ data }) => {
      if (data.code == 20000) {
          if(data.data.data.length){
              get(data.data.data[0].id,'reports').then(res=>{
                this.info = res.data.data
                this.initChart('charts_j')
              })
          }
      }
    });
    if (!id) {
      return;
    }
 
  },
  mounted() {
    this.initCharts_radar('charts_radar')  
  },
  methods: {
      setStatus(e){
          this.status = e
          setTimeout(()=>{
              this.initChart('charts_j')
          })
      },
      initCharts_radar(id){
          console.log(999,id);
          let option = {
            grid: {
              right: '-20%',
              containLabel: true
            },
            color: ['#00DCD8', '#206EF7'],
            tooltip: {
              show: false // 弹层数据去掉
            },
            radar: {
              center: ['50%', '50%'], // 外圆的位置
              radius: '66%',
              name: {
                textStyle: {
                  color: '#000',
                  fontSize: 14,
                  fontWeight: 400,
                  fontFamily: 'PingFangSC-Regular,PingFang SC',
                  fontStyle: 'normal'
                }
              },
              // TODO:
              indicator: [
                {
                  name: '内阻',
                  max: 100
                },
                {
                  name: '离散度',
                  max: 100
                },
                {
                  name: '时间差值',
                  max: 100
                },
                {
                  name: '极化参数',
                  max: 100
                },
                {
                  name: '特征向量',
                  max: 100
                }
              ],
              splitArea: {
                // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                show: false
                // areaStyle: {
                //   // 分隔区域的样式设置。
                //   color: ['rgba(255,255,255,0.19)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                // }
              },
              axisLine: {
                // 指向外圈文本的分隔线样式
               show:false
              },
              splitLine: {
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(0,0,0,0.13)', // 分隔线颜色
                  width: 1 // 分隔线线宽
                }
              }
            },
            series: [
              {
                type: 'radar',
                symbolSize: 2,
                // 图形区域的边框宽度设置
                lineStyle: {
                  width: 1
                },
                data: [
                  {
                    // TODO:
                    value: [80, 80, 80, 70, 60],
                    name: '模型数量',
                    areaStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(32, 110, 247, 1)' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
                        }
                      ]) //背景渐变色
                    },
                    itemStyle: {
                      // 折线拐点标志的样式。
                      normal: {
                        // 普通状态时的样式
                        lineStyle: {
                          width: 1
                        },
                        opacity: 0.3
                      },
                      emphasis: {
                        // 高亮时的样式
                        lineStyle: {
                          width: 5
                        },
                        opacity: 0
                      }
                    },
                    symbolSize: 0
                  },
                  {
                    // TODO:
                    value: [40, 70, 50, 60, 30],
                    name: '共享模型数量',
                    areaStyle: {
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgba(0, 220, 216, 1)',
                          },
                        {
                          offset: 1,
                          color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
                        }
                      ]) //背景渐变色
                    },
                    itemStyle: {
                      // 折线拐点标志的样式。
                      normal: {
                        // 普通状态时的样式
                        lineStyle: {
                          width: 1
                        },
                        opacity: 0.3
                      },
                      emphasis: {
                        // 高亮时的样式
                        lineStyle: {
                          width: 5
                        },
                        opacity: 0
                      }
                    }
                  }
                ]
              }
            ]
          }
          var myChart = this.$echarts.init(document.getElementById(id));
          // 使用刚指定的配置项和数据显示图表
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
      },
      initChart(id){
          let series = []
          let diagnosis_info = this.info.diagnosis_info
          let num = 0
          for(let i=diagnosis_info.length-1;i>=0;i--){
              series.push({
                  name: diagnosis_info[i].type,
                  type: 'bar',
                  data: [diagnosis_info[i].score*100],
                  backgroundStyle: {
                      color: 'transparent',
                  },
                  coordinateSystem: 'polar',
                  roundCap: true,
                  barWidth: 5
              })
              num += diagnosis_info[i].score*100
          }
          let option = {
              color: ['#FFBF35', '#74F5F6','#206EF7' ],
              legend: {
                  show:false
              },
              title: {
                      text: (num/3).toFixed(0),
                      x: 'center',
                      y: 'center',
                      textStyle: {
                        color:'#206EF7',
                        fontSize:23
                      }
                    },
              angleAxis: {
                  max: 100,
                  clockwise: true, // 顺时针
                  startAngle: 90,
                  show: false // 隐藏刻度线
              },
              radiusAxis: {
                  type: 'category',
                  show: true,
                  axisLabel: {
                      show: false,
                  },
                  axisLine: {
                      show: false,
          
                  },
                  axisTick: {
                      show: false
                  },
              },
              polar: {
                  center: ['50%', '50%'],
                  radius: '140%' //图形大小
              },
              series
          };
          var myChart = this.$echarts.init(document.getElementById(id));
          // 使用刚指定的配置项和数据显示图表
          myChart.setOption(option);
          window.addEventListener("resize", function () {
            myChart.resize();
          });
      },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          updata({ ..._this.form },'users').then(({ data }) => {
            if (data.code == 20000) {
              _this.resetForm();
            } else {
              _this.$message.error("修改角色失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleChange(value) {
      this.form.enterprise_id = value
    },
    handleChange2(value) {
      this.form.role_id = value
    },
    handleSearch(txt,thisName){
      console.log(txt,thisName);
      let search = {
        search:txt,
        searchFields:'name:like'
      }
      gets(search,thisName).then(({data})=>{
        if(data.code==20000){
          _this[thisName] = data.data.data
        }
      })
    },
    resetForm() {
      this.$router.push('/home')
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);
      this.selectedKeys = selectedKeys;
    },
  },
};
</script>

<style scoped lang="less">
    .unit_box{
        margin: 20px;
        height: 170px;
        display: flex;
        .unit{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            height: 170px;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            .unit_p{
                position: relative;
                img{
                    width: 90px;
                    height: 107px;
                }
                
                .unit_desc{
                    display: block;
                    text-align: center;
                    width: 100%;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #000000;
                    margin-top: 10px;
                }
            }
        }
        .unit:hover{
            background: #E7F7FC;
        }
    }
    .table{
        display: flex;
        padding-top: 10px;
        padding-left: 16px;
        .row{
            flex: 1;
            .title{
                height: 50px;
                line-height: 50px;
                color: rgba(0,0,0,0.85);
            }
            .desc{
                    .warn_n{
                        color: #1EB432;
                    }
                  .error{
                      color: #FF2F4F;
                  }
                  .warn{
                      color: #FF6600;
                  }
                  .data_info{
                      display: flex;
                      align-items: center;
                      .icon{
                            display: inline-block;
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            margin-right: 8px;
                      }
                      .i1{
                          background-color: #206EF7;
                      }
                      .i2{
                          background-color: #74F5F6;
                      }
                      .i3{
                          background-color: #FFBF35;
                      }
                  }
            }
        }
        .f2{
            flex: 2;
        }
        .f3{
            flex: 3;
        }
        .f4{
            flex: 4;
        }
        .f4{
            flex: 5;
        }
    }
      
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  margin: 24px;
  border-radius: 4px;
  .content_box {
    padding: 24px;
    .seloect_box{
        height: 40px;
        background: #F7F8FA;
        border-radius: 0px 4px 0px 0px;
        span{
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #7A8794;
            line-height: 40px;
            padding: 0 15px;
            display: inline-block;
            cursor: pointer;
        }
        .active{
            color: #206EF7;
            background-color: #fff;
        }
    }
  
    .realTime_box{
        margin-top: 10px;
        .realTime_title{
          height: 36px;
          background: #F7F8FA;
          border-radius: 4px 4px 0px 0px;
          text-align: left;
          line-height: 36px;
          display: flex;
          align-items: center;
          font-size: 14px;
          padding-right: 20px;
          .icon{
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              color: #1890ff;
              text-align: center;
              font-size: 14px;
              border-radius: 50%;
              background-color: #fff;
              border: 1px solid #1890ff;
              margin: 0 10px 0 26px;
          }
          .desc{
            
          }
          .btn{
              margin-left: auto;
              font-family: PingFang SC;
              font-weight: 500;
              color: #206EF7;
              cursor: pointer;
          }
      }  
        .status_box{
            display: flex;
            justify-content: space-between;
            padding: 20px 0;
            .status{
                display: flex;
                align-items: center;
                div{
                    margin-right: 20px;
                    .icon{
                        display: inline-block;
                        border: 4px solid red;
                        border-radius: 50%;
                        background-color: red;
                    }
                    .desc{
                        font-size: 14px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        margin-left: 5px;
                    }
                }
            }
            .status_btn{
                background: #FFFFFF;
                border: 1px solid #E6EAF2;
                border-radius: 4px 0px 0px 4px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #6E7584;
                cursor: pointer;
                .btn{
                    display: inline-block;
                    padding: 9px 16px;
                }
                .btn:nth-of-type(1){
                    border-right: 1px solid #F7F8FA;
                }
                .active{
                    background: #F7F8FA;
                    color: #000000;
                }
            }
        }
        .bulletinBoard{
            .row4,.row5{
                display: flex;
                margin-bottom: 14px;
                gap:16px;
                span{
                    flex: 1;
                    display: inline-block;
                    text-align: center;
                    height: 66px;
                    line-height: 66px;
                    background: #16E6FF;
                    border-radius: 4px;
                }
            }
        
        }
    }
  }
}
</style>